<template>
  <div class="items">
    <div class="city">北京</div>
    <div class="monthwarp">
      <!-- month1 有广告播出
      month2 有资源锁定
      month3有锁定队列
      month4 无
      month5 混合态 -->
      <div class="month" :class="{'month1':item.type==1,'month2':item.type==2,'month3':item.type==3,'month4':item.type==4,'month5':item.type==5}" v-for="(item,index) in list" :key="index">{{item.mounth}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { type: 1, mounth: 1 },
        { type: 2, mounth: 2 },
        { type: 1, mounth: 3 },
        { type: 4, mounth: 4 },
        { type: 4, mounth: 5 },
        { type: 1, mounth: 6 },
        { type: 3, mounth: 7 },
        { type: 4, mounth: 8 },
        { type: 2, mounth: 9 },
        { type: 4, mounth: 10 },
        { type: 5, mounth: 11 },
        { type: 4, mounth: 12 }
      ]
    };
  },
  computed: {
   
  },
};
</script>
<style lang="scss" scoped>
.items {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(121, 121, 121, 1);
  display: flex;
  flex-direction: column;
  .city {
    height: 32px;
    border-bottom: 0.5px solid rgba(121, 121, 121, 1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .monthwarp {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    .month {
      width: 31.5px;
      height: 31px;
      border: 0.5px solid rgba(121, 121, 121, 1);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.month1{
  background: rgba(25, 158, 216, 1);
}
.month2{
  background: rgba(153, 153, 153, 1);
}
.month3{
  background: rgba(204, 204, 204, 1);
}
.month4{
  background: #fff;
}
.month5{
  background: rgba(255, 102, 153, 1);
}
</style>